<script setup lang="ts">
const props = defineProps<{
  active: boolean;
  icon: string;
  name: string;
}>();

const iconStyle = computed(() => `--icon:url("${props.icon}")`);
</script>

<template>
  <li class="crumb" :class="{ active: $props.active }" :style="iconStyle">
    <div class="icon" />
    <span class="name">{{ $props.name }}</span>
  </li>
</template>

<style lang="scss" scoped>
.crumb {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #848a9d;
  cursor: pointer;

  &.active {
    color: #fff;
    &::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 50px;
      height: 8px;
      background: url('./icon/bottom-bar.svg') no-repeat center/cover;
      transform: translateX(-50%);
    }
  }

  .icon {
    width: 20px;
    height: 20px;
    mask: var(--icon) no-repeat;
    mask-size: 100% 100%;
    background-color: currentColor;
    transition: all 0.1s;
    transform-origin: center bottom;
  }

  &:active .icon {
    transform: scale(0.9);
  }

  &.active .icon {
    transform: scale(1.2);
  }

  .name {
    margin-top: 2px;
  }
}
</style>
